﻿<div id="status">Connecting...</div>
<div id="chatHeader"></div>
<div class="right-column">
    <div id="usersContainer" data-bind="foreach: users">
        <input type="hidden" data-bind="value: Id" />
        <div class="userName" data-bind="text: Name"></div>
    </div>
</div>
<div id="outerChatBox">
    <div id="chatBody">
        <table id="messageContainer" border="1">
            <tbody  data-bind="foreach: messages">
                <tr class="message">
                    <td class="from">
                        <input type="hidden" data-bind="value: userId" /><div data-bind="text: userName"></div>
                    </td>
                    <td class="content" data-bind="html: message, css: { me: currentUserId == userId }"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="chatInputContainer">
        <input type="text" id="message" placeholder="Message..." />
    </div>
    <div id="optionsContainer">
        <div id="optionsAnchor">Options</div>
        <div id="options">
            <div id="enableNotify">enable notifications</div>
        </div>
    </div>
</div>

